<template>
  <el-dialog title="选择通知人员" :visible.sync="dialogVisible" @close="$emit('update:visible',false)">
    <el-table :data="arryList"
              height="400"
              @select-all="selectAll"
              @select="selectFnBox"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              ref="table">
      <el-table-column
              type="selection"
              width="50"
              align="center">
      </el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="scope">
          {{scope.row.classes?scope.row.classes.class_name:'未记录'}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realname" align="center"></el-table-column>
    </el-table>
    <el-pagination
            :page-size="page.pagesize"
            layout="prev, pager, next"
            :total="page.total"
            :current-page="page.pageindex"
            @current-change="handleSizeChange">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitCheckFn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    name: 'studentMultiple',
    props: ['visible', 'usersectionId', 'userclassId', 'dynamicTagsArray'],
    data () {
      return {
        dialogVisible: this.visible,
        // 设置table样式
        tableStyle: tableoption,
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        editForm: {
          p: '',
          realname: '',
          role: ''
        },
        arryList: [],
        applyBookBox: {}, // 选中人员信息
        applyBookBoxInit: {} // 本页面对应对象
      }
    },
    watch: {
      visible () {
        this.dialogVisible = this.visible
        console.log('this.visible:', this.visible)
        if (this.visible) {
          console.log('第一页1', this.dynamicTagsArray)
          if (JSON.stringify(this.dynamicTagsArray) !== '{}') {
            console.log('第一页2')
            this.applyBookBox = this.dynamicTagsArray
          } else {
            console.log('第一页')
            this.page.pageindex = 1
            this.applyBookBox = {}
          }
          this.InitFn()
        }
      }
    },
    created () {
    },
    methods: {
      // 初始化
      InitFn () {
        let _this = this
        this.editForm.p = this.page.pageindex
        this.$fetch(api.admin_user_index, this.editForm).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
            let applyBookBoxInit = {}
            for (let i = 0; i < response.list.data.length; i++) {
              applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
            }
            this.applyBookBoxInit = applyBookBoxInit
            _this.$nextTick(function () {
              _this.checked() // 每次更新了数据，触发这个函数即可。
            })
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 设置默认选中
      checked () {
        console.log('默认选项判断', this.applyBookBox)
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            console.log('数值', i)
            this.$refs.table.toggleRowSelection(this.arryList[i], true)
          }
        }
      },
      // 点击全选
      selectAll (val) {
        // 全选所有跟空值，即使页面已经选择2项
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // this.handleSelection = val
          for (let i = 0; i < val.length; i++) {
            if (!applyBookBox[val[i].id]) {
              // 不存在图书
              applyBookBox[val[i].id] = val[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i = 0; i < this.arryList.length; i++) {
            if (this.applyBookBox[this.arryList[i].id]) {
              // 存在图书删除
              delete applyBookBox[this.arryList[i].id]
            }
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      selectFnBox (val) {
        // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // 有选项 对本页面的选项进行比对
          let valBox = {}
          for (let i = 0; i < val.length; i++) {
            valBox[val[i].id] = val[i]
          }
          for (let i in this.applyBookBoxInit) {
            if (valBox[i]) {
              applyBookBox[i] = this.applyBookBoxInit[i]
            } else {
              delete applyBookBox[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i in this.applyBookBoxInit) {
            delete applyBookBox[i]
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
        console.log('applyBookBox:', this.applyBookBox)
      },
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      submitCheckFn () {
        console.log('applyBookBox:', this.applyBookBox)
        if (JSON.stringify(this.applyBookBox) === '{}') {
          this.$message({
            message: '请填特定的学生',
            type: 'error'
          })
        } else {
          this.$emit('studentFn', this.applyBookBox)
          this.dialogVisible = false
        }
      }
    },

    mounted () {
    }
  }
</script>
